

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息登记表</title>
    <style>
        body{
            font-size: 12px;
            font-family: "微软雅黑";
        }
        body,form,h1,p{
            padding: 0;
            margin: 0;
            border: 0;
            color: red;
        }
        input{
            padding: 0;
            margin: 0;
            border: 0;
            color: blueviolet;
        }
        .bg{
            width: 1520px;
            height: 800px;
            background: url(images/AAAAAAAA.jpg) no-repeat;
            position: relative;
        }
        form{
            width: 600px;
            height: 400px;
            margin: 50px auto;
            padding-left: 30px;
            position: absolute;
            left: 48%;
            top: 10%;
        }
        h2{
            text-align: center;
            margin: 16px 0;
        }
        p{
            margin-top: 20px;
        }
        p span{
            width: 100px;
            display: inline-block;
            text-align: right;
            padding-right: 20px;
        }
        p input{
            width: 200px;
            height: 18px;
            border: 1px solid #38a1bf;
            padding: 2px;
        }
        .lucky input{
            width: 100px;
            height: 24px;
        }
        .btn input{
            width: 100px;
            height: 30px;
            background: #93b518;
            margin-top: 20px;
            margin-left: 75px;
            border-radius: 3px;
            font-style: 18px;
            font-family: "微软雅黑";
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="bg">
        <form action="#" method="post" autocomplete="off"></form>
        <h2>信息登记表</h2>
        <p><span>用户登陆名：</span><input type="text" name="user_name" value="myemail@163.com" readonly disabled>(不能修改,只能查看)</p>
        <p><span>真实姓名：</span><input type="text" name="real_name" pattern="" placeholder="例如：李明" required autofocus/>(必须填写,只能输入汉字)</p>
        <p><span>真实年龄：</span><input type="number" name="real_lage"  max="100" min="18" required>(必须填写)</p>
        <p><span>出生日期：</span><input type="date" name="birthday" required/>(必须填写)</p>
        <p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="123456@126.com" required multiple>(必须填写)</p>
        <p><span>身份证号：</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x] {8,18}|[0-9x] {8,18}?$"/>(必须填写,能够以数字、字母x结尾的短身份证号)</p>
        <p><span>手机号码：</span><input type="tel"name="telphone" pattern="^\d{11}$" required/>(必须填写)</p>
        <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http:www.00000.cn" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%$&=]*)?$"/>(请选择网址)
         <detalist id="urllist">
             <!-- <option value="">http://www.aaaaa.cn</option>
             <option value="">http://www.bbbbb.com</option>
             <option value="">http://www.ccccc.cn</option> -->
        </p>
        <p><span>幸运颜色：</span><input type="color" name="lovecolor" value="#fed000">(请选择你喜欢的颜色)</p>
        <p class="btn">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </div>
</body>
</html>